<template>
  <div style="height: 100%; width: 100%">
    <div id="zdcwzx" style="height: 100%" />
    <CheckDetail v-bind="$attrs" ref="checkdetail" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import echartsBg from '@/assets/img/echartsBg.png'
import CheckDetail from './Detail/CheckDetail.vue'
export default {
  components: { CheckDetail },
  inheritAttrs: false,
  name: 'Zdcwzx',
  props: {
    dataset: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: '',
    },
    perOrwan: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    dataset(val) {
      console.log(val, 'props')
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getLInechart(this.dataset, this.title)
    })
  },
  methods: {
    getLInechart(dataset, title) {
      var chartDom = document.getElementById('zdcwzx')
      var myChart = echarts.init(chartDom)
      myChart.on('click', (params) => {
        this.$refs.checkdetail.show(params)
      })
      var option
      option = {
        title: {
          left: 'center',
          text: title,
        },
        grid: {
          show: true,
          top: 50,
          bottom: 50,
          left: '6%',
          right: 60,
          width: 'auto',
          backgroundColor: {
            type: 'pattern',
            repeat: 'repeat',
            image: echartsBg, // 赋值
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              formatter: '{value}',
            },
          },
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
          data: dataset[1],
        },
        yAxis: {
          type: 'value',
          name: `${this.perOrwan ? '万元' : ''}`,
          max: this.perOrwan
            ? function (value) {
                return Math.round(value.max) + Math.round(value.max)/10
              }
            : function (value) {
                return Math.round(value.max) + 20
              },
          //   data:['资产负债率','年应收客户合同工程款增（降）幅','营业收入增（降）幅','年度经营性有息负债增幅','新签合同额增幅','经营活动现金净流量','投资活动现金净流量']
          axisLabel: {
            formatter: '{value}' + `${this.perOrwan ? '' : '%'}`,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: title,
            data: dataset[0],
            type: 'line',
            symbolSize: 13,
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(254,246,248,0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(254,246,248, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(254,246,248, 1)',
                  },
                ]),
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
</style>
